<template>
	<view class="search-container">
		<view class="search-box">
			<view class="search-input-wrap">
				<text class="icon">🔍</text>
				<input 
					type="text" 
					v-model="searchText" 
					placeholder="搜索商品" 
					@confirm="handleSearch"
					@input="handleInput"
				/>
				<text class="clear-icon" v-if="searchText" @click="clearSearch">×</text>
			</view>
		</view>
		
		<!-- 搜索历史 -->
		<view class="search-history" v-if="showHistory">
			<view class="history-header">
				<text class="title">搜索历史</text>
				<text class="clear" @click="clearHistory">清空</text>
			</view>
			<view class="history-list">
				<text 
					class="history-item" 
					v-for="(item, index) in searchHistory" 
					:key="index"
					@click="selectHistory(item)"
				>{{item}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const searchText = ref('')
const showHistory = ref(true)
const searchHistory = ref([])

// 从本地存储加载搜索历史
onMounted(() => {
	const history = uni.getStorageSync('searchHistory')
	if (history) {
		searchHistory.value = JSON.parse(history)
	}
})

// 处理搜索
const handleSearch = () => {
	if (!searchText.value.trim()) return
	
	// 添加到搜索历史
	addToHistory(searchText.value)
	
	// 触发搜索事件
	emit('search', searchText.value)
}

// 处理输入
const handleInput = () => {
	showHistory.value = true
}

// 清空搜索
const clearSearch = () => {
	searchText.value = ''
}

// 清空历史
const clearHistory = () => {
	searchHistory.value = []
	uni.removeStorageSync('searchHistory')
}

// 选择历史记录
const selectHistory = (keyword) => {
	searchText.value = keyword
	handleSearch()
}

// 添加到历史记录
const addToHistory = (keyword) => {
	const index = searchHistory.value.indexOf(keyword)
	if (index > -1) {
		searchHistory.value.splice(index, 1)
	}
	searchHistory.value.unshift(keyword)
	if (searchHistory.value.length > 10) {
		searchHistory.value.pop()
	}
	uni.setStorageSync('searchHistory', JSON.stringify(searchHistory.value))
}

// 定义事件
const emit = defineEmits(['search'])
</script>

<style>
.search-container {
	padding: 20rpx;
	background-color: #FFFFFF;
}

.search-box {
	padding: 20rpx 0;
}

.search-input-wrap {
	display: flex;
	align-items: center;
	background-color: #F5F5F5;
	border-radius: 30rpx;
	padding: 10rpx 20rpx;
}

.search-input-wrap .icon {
	font-size: 32rpx;
	margin-right: 10rpx;
}

.search-input-wrap input {
	flex: 1;
	height: 60rpx;
	font-size: 28rpx;
}

.search-input-wrap .clear-icon {
	font-size: 40rpx;
	color: #999;
	padding: 0 10rpx;
}

.search-history {
	margin-top: 20rpx;
}

.history-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.history-header .title {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.history-header .clear {
	font-size: 24rpx;
	color: #999;
}

.history-list {
	display: flex;
	flex-wrap: wrap;
}

.history-item {
	font-size: 24rpx;
	color: #666;
	background-color: #F5F5F5;
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}
</style> 